<template>
	<view class="u-p-24" style="padding-bottom: 200rpx !important;">
		<view class="bg-white u-p-24 border-ra box-shadow">
			<view class="u-font-xl">{{orderPinia.orderDetail.address}}</view>
			<view class="u-flex u-font-md u-m-t-8">
				<view>{{orderPinia.orderDetail.linkName}}</view>
				<view class="u-m-l-22">{{orderPinia.orderDetail.phone}}</view>
			</view>
		</view>
		<view class="bg-white u-p-24 border-ra box-shadow u-m-t-28 u-flex">
			<view>是否使用养老金抵扣</view>
			<view style="margin-left: auto;">
				<u-switch size="36" activeColor="#ffc300" v-model="isAnnuity" @change="annuityChange"></u-switch>
			</view>
		</view>
		<view class="bg-white u-p-24 border-ra box-shadow u-m-t-28 u-flex ">
			<view>是否使用物业金抵扣</view>
			<view style="margin-left: auto;">
				<u-switch size="36" activeColor="#ffc300" v-model="isPropertyFee"
					@change="propertyFeeChange"></u-switch>
			</view>
		</view>
		<!-- 	<view class="bg-white u-p-24 border-ra box-shadow u-m-t-28">
			<view class="u-font-md">支付方式</view>

		</view> -->
		<view class="bg-white  border-ra box-shadow u-m-t-28 u-p-b-24">
			<block v-for="(item,index) in goodList.list" :key="index">
				<view class="u-p-24">
					<view class="u-font-md">{{item.businessName}}</view>
				</view>
				<view class="u-p-t-12 u-p-b-12 u-m-l-24 u-m-r-24">
					<block v-for="(items,indexs) in item.list" :key="indexs">
						<view class="u-flex u-col-top u-m-t-15">
							<u-image width="120" height="120" :src="items.images"></u-image>
							<view class="u-flex-1 u-m-l-18 u-m-t-18">
								<view>{{items.name}}</view>
								<view v-if="items.goodsType == 1 && items.variantState == 2">
									规格：{{items.sku}}
								</view>
								<view v-if="items.goodsType == 2 && items.variantState == 1">
									{{items.skuName}}
								</view>
								<view class="u-font-xs color-gray-xs">x{{items.nums}}</view>
							</view>
							<text class="u-m-t-12 u-font-lg">￥{{items.salePrice}}</text>
						</view>
					</block>
				</view>
				<view class="u-font-sm">
					<view class="u-flex u-row-between u-m-l-24 u-m-r-24 u-m-t-16">
						<text>打包费</text>
						<text>￥{{item.packageAmount}}</text>
					</view>
					<view class="u-flex u-row-between u-m-l-24 u-m-r-24 u-m-t-16">
						<text>配送费</text>
						<text>￥{{item.deliveryAmount}}</text>
					</view>
					<view v-if="isAnnuity" class="u-flex u-row-between u-m-l-24 u-m-r-24 u-m-t-16">
						<text>养老金抵扣额</text>
						<text>￥{{item.discountOld || 0}}</text>
					</view>
					<view class="u-flex u-row-between u-m-l-24 u-m-r-24 u-m-t-16">
						<text>养老金返利额</text>
						<text>￥{{item.rebateOld || 0}}</text>
					</view>
					<view v-if="isPropertyFee" class="u-flex u-row-between u-m-l-24 u-m-r-24 u-m-t-16">
						<text>物业金抵扣额</text>
						<text>￥{{item.discountPmc || 0}}</text>
					</view>
					<view class="u-flex u-row-between u-m-l-24 u-m-r-24 u-m-t-16">
						<text>物业金返利额</text>
						<text>￥{{item.rebatePmc || 0}}</text>
					</view>
					<view class="u-flex u-m-l-24 u-m-r-24 u-row-right u-m-t-16">
						<text>小计￥<text class="u-font-xl .fw-large">{{computedPrice(item)}}</text></text>
					</view>
				</view>
			</block>
		</view>
		<view class="balance-wrapper">
			<view class="total-price-wrapper">
				￥<span class="total-price">{{goodList.payTotalAmount<0?0:goodList.payTotalAmount}}</span>
			</view>
			<view class="balance" @click="submitOrder">
				提交订单
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onLoad } from '@dcloudio/uni-app'
	import orderApi from '@/api/order'
	import orderSotre from '@/store/order'
	import { computed, ref } from "vue";

	const orderPinia = orderSotre()
	const type = ref(0)//0立即购买 1 购物车结算
	const goodList = ref([])
	const payList = ref([])
	const isAnnuity = ref(true)
	const isPropertyFee = ref(true)


	function annuityChange(e) {
		isAnnuity.value = e
		if (e) {
			goodList.value.payTotalAmount = goodList.value.payTotalAmount - goodList.value.discountOld
		} else {
			goodList.value.payTotalAmount = goodList.value.payTotalAmount + goodList.value.discountOld
		}
	}

	function propertyFeeChange(e) {
		isPropertyFee.value = e
		if (e) {
			goodList.value.payTotalAmount = goodList.value.payTotalAmount - goodList.value.discountPmc
		} else {
			goodList.value.payTotalAmount = goodList.value.payTotalAmount + goodList.value.discountPmc
		}
	}

	function submitOrder() {
		uni.showLoading({
			title: '提交中...'
		})
		let data = {
			amount: goodList.value.payTotalAmount<0?0:goodList.value.payTotalAmount,
			beeperId: orderPinia.orderDetail.beeperId,
			btnId: orderPinia.orderDetail.btnId,
			btnServerClassifyIds: orderPinia.orderDetail.btnServerClassifyIds,
			businessId: orderPinia.orderDetail.businessId,
			harvestAddressId: orderPinia.orderDetail.harvestAddressId,
			oldOrderId: orderPinia.orderDetail.orderId,
			orderAttrs: [],
			params: goodList.value.list,
			payType: 3,
			queryType: orderPinia.orderDetail.queryType,
			oldAmountOff: isAnnuity.value,
			pmcAmountOff: isPropertyFee.value,
		}
		orderApi.shoppingAddOrder({
			params: data
		}).then(res => {
			uni.showToast({
				title: '提交成功'
			})
			let time = setTimeout(() => {
				uni.navigateBack({
					success: () => {
						clearTimeout(time)
					}
				})
			}, 1200)
		}).finally(() => {
			uni.hideLoading()
		})
	}

	function computedPrice(item) {
		let total = item.payAmount;
		if (isAnnuity.value) {
			total -= item.discountOld;
			if (isPropertyFee.value) {
				total -= item.discountPmc;
			} else {
				total += item.discountPmc;
			}
		} else {
			total += item.discountOld;
			if (isPropertyFee.value) {
				total -= item.discountPmc;
			} else {
				total += item.discountPmc;
			}
		}
		return total < 0 ? 0 : total;
	}

	onLoad((e) => {
		console.log(orderPinia.orderDetail)
		let types = JSON.parse(decodeURIComponent(e?.list ?? []))
		if (types.length == 0) {
			type.value = 1
			payList.value = orderPinia.shopList
		} else {
			type.value = 0
			payList.value = types
		}

		orderApi.listCalculateData({
			list: payList.value.map(item => {
				return {
					beeperBtnId: item.id,
					goodsType: item.goodsType,
					nums: item.nums,
					variantId: item.variantId,
					variantIds: item.relationVariantIds ? item.relationVariantIds : ''
				}
			}),
			addressId: orderPinia.orderDetail.harvestAddressId,
			oldAmountOff: isAnnuity.value,
			pmcAmountOff: isPropertyFee.value,
			ordersUserId:orderPinia.orderDetail.ordersUserId
		}).then(res => {
			goodList.value = res.data
			goodList.value.list.forEach(dataItem => {
				if (dataItem.oGRelations && dataItem.oGRelations.length > 0) {
					dataItem.skuName = dataItem.oGRelations.map(og => `${og.name}-${og.sku}`).join(',');
				} else {
					dataItem.skuName = '';
				}
			});
		})
	})
</script>

<style lang="scss" scoped>
	.balance-wrapper {
		z-index: 10;
		width: 90%;
		height: 100upx;
		background-color: black;
		border-radius: 50upx;
		position: fixed;
		bottom: 60upx;
		left: 0;
		right: 0;
		margin: auto;
		display: flex;
		padding-left: 40upx;
		justify-content: space-between;
		align-items: center;
	}

	.total-price-wrapper {
		color: white;
		padding-left: 12upx;
		font-size: 35upx;
	}

	.total-price {
		font-size: 43upx;
	}

	.balance {
		width: 180upx;
		height: 100%;
		background-color: #FFC300;
		line-height: 100upx;
		text-align: center;
		border-top-right-radius: 50upx;
		border-bottom-right-radius: 50upx;
		font-weight: 900;
		font-size: 34upx;
	}
</style>